<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>特价</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/special_models.css">
    <link rel="stylesheet" href="../css/special_models1.css">
    <link rel="stylesheet" href="../layui/css/layui.css">

    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../layui/layui.js"></script>
    <style>
        .nav-wrap li {
            font-size: 14px;
        }
        .top-linkbox{
            line-height: 1.3;
        }
    </style>
</head>
<body>
<!-- 头部导航 -->
<div class="header">
    <!-- header-top -->
    <div class="header-top">
        <div class="middle">
            <ul class="right">
                <a href="javascript:void(0)">帮助中心</a><span>|</span>
                <a href="javascript:void(0)">400-321-2202</a><span>|</span>
                <p href="javascript:void()">微信</p>
            </ul>
            <ul class="left">
                <a href="../customer/login.html">登陆</a><span>|</span>
                <a href="../customer/regist.html">注册</a><span>|</span>
                <p class="name" >我的随行</p>
            </ul>
        </div>
    </div>
    <!-- header-navigation -->
    <div class="header-navigation">
        <div class="middle">
            <!-- log -->
            <div class="header-img">
                <img src="../images/header-logo.png" alt="">
            </div>
            <div class="header-nav">
                <li><a href="../index.html" class="header-word active">首页<span></span> </a></li>
                <li><a href="../car_rental/car_filter.html"  class="header-word">去租车<span></span></a></li>
                <li><a  href="../car_rental/car_select.html"  class="header-word">车型查询<span></span></a></li>
                <li><a href="../network/businessoutlets.html"  class="header-word">网点导航<span></span></a></li>
                <li><a href="../customer/customer_center.html"  class="header-word">个人中心<span></span></a></li>
                <li><a href="javascript:void(0)" class="header-word">特价优惠<span></span></a></li>
                <li><a href="javascript:void(0)" class="header-word">我的收藏<span class="myshoucang"></span></a></li>


            </div>
        </div>
    </div>
</div>
<!-- 轮播图最大的盒子 -->
<div class="carousel">
    <!-- 放置图片内容盒子 -->
    <div class="cal-list">
        <!-- ul整体 -->
        <ul class="viewpage">
            <li><img src="../images/special/fangxin.jpg" alt=""></li>
            <li><img src="../images/special/faxian4.jpg" alt=""></li>
            <li><img src="../images/special/mianyajin.jpg" alt=""></li>
            <li><img src="../images/special/tuangou.jpg" alt=""></li>
            <li><img src="../images/special/zhiqingchun.jpg" alt=""></li>
            <!--                     给ul添加最后子元素,这个子元素是第一个li-->
            <li><img src="../images/bmw3xi.jpg" alt=""></li>
        </ul>
        <!-- 放置左右按钮 -->
        <div class="prev">&lt;</div>
        <div class="next">&gt;</div>
    </div>
    <!-- 小圆点 -->
    <div class="circle-list">
        <span class="circle active"></span>
        <span class="circle"></span>
        <span class="circle"></span>
        <span class="circle"></span>
        <span class="circle"></span>
    </div>
</div>
<div style="position: relative; top: 18px;" class="w1180">
    <div class="hotcar-box">
        <div class="hotcar-intro clear_float">
            <div class="hotcar-left">
                <div style="font-size: 24px" class="hotcar-bt">热租车型</div>
                <a href="" target="_blank">
                    <div class="hotcar-banner">
                        <img src="../images/bmw3xi.jpg" >
                    </div>
                </a>
            </div>
            <div class="hotcar-right">
                   <a class="hotcar-liinfo" href="">
                <span class="iconmore hoticon"></span>
                <div class="hotcar-info">
                    <div class="hotcar-name">本田新飞度</div>
                    <div class="hotcar-type"><span>经济型 | 自动 | 5座</span></div>
                    <div class="hotcar-price"><span><em>￥</em>126</span>/天起</div>
                </div>
                <div class="hotcar-car" style="right: -20px;">
                    <img src="../images/bmw3xi.jpg" ></div>
            </a>
                <a class="hotcar-liinfo" href="">
                    <span class="iconmore hoticon"></span>
                    <div class="hotcar-info">
                        <div class="hotcar-name">本田新飞度</div>
                        <div class="hotcar-type"><span>经济型 | 自动 | 5座</span></div>
                        <div class="hotcar-price"><span><em>￥</em>126</span>/天起</div>
                    </div>
                    <div class="hotcar-car" style="right: -20px;">
                        <img src="../images/bmw3xi.jpg" ></div>
                </a>
                <a class="hotcar-liinfo" href="">
                    <span class="iconmore hoticon"></span>
                    <div class="hotcar-info">
                        <div class="hotcar-name">本田新飞度</div>
                        <div class="hotcar-type"><span>经济型 | 自动 | 5座</span></div>
                        <div class="hotcar-price"><span><em>￥</em>126</span>/天起</div>
                    </div>
                    <div class="hotcar-car" style="right: -20px;">
                        <img src="../images/bmw3xi.jpg" ></div>
                </a>
                <a class="hotcar-liinfo" href="">
                    <span class="iconmore hoticon"></span>
                    <div class="hotcar-info">
                        <div class="hotcar-name">本田新飞度</div>
                        <div class="hotcar-type"><span>经济型 | 自动 | 5座</span></div>
                        <div class="hotcar-price"><span><em>￥</em>126</span>/天起</div>
                    </div>
                    <div class="hotcar-car" style="right: -20px;">
                        <img src="../images/bmw3xi.jpg" ></div>
                </a>

            </div>

        </div>

    </div>
    <!-- 底部导航栏 -->
    <div class="index-bottom">
        <div class="middle">
            <!-- 账户服务 -->
            <div class="bottom-account">
                <ul>
                    <span>新手指南</span>
                    <li><a href="javascript:void(0)">注册新用户</a></li>
                    <li><a href="javascript:void(0)">预定演示</a></li>
                    <li><a href="javascript:void(0)">取消或者修改订单</a></li>
                </ul>
                <ul>
                    <span>租车贴士</span>
                    <li><a href="javascript:void(0)">支付方式</a></li>
                    <li><a href="javascript:void(0)">精彩活动</a></li>

                </ul>
                <ul>
                    <span>售后服务</span>
                    <li><a href="javascript:void(0)">联系售后</a></li>

                </ul>
                <ul>
                    <span>会员服务</span>
                    <li><a href="javascript:void(0)">忘记密码</a></li>
                    <li><a href="javascript:void(0)">会员充值</a></li>
                    <li><a href="javascript:void(0)">积分说明</a></li>


                </ul>
                <ul>
                    <span>网站帮助</span>
                    <li><a href="javascript:void(0)">注册新用户</a></li>

                    <li><a href="javascript:void(0)">联系我们</a></li>
                </ul>
                <ul>
                </ul>
                <ul>

                </ul>

            </div>
            <!--相关信息-->
            <div class="connect">
                <div class="line-one">
                    <li><a>关于随行</a></li> <span>｜</span>
                    <li><a>移动客户端</a></li> <span>｜</span>
                    <li><a>帮助中心</a></li> <span>｜</span>
                    <li><a>投诉</a></li> <span>｜</span>
                    <li><a>联系我们</a></li>
                </div>
                <div class="line-two">
                    <a>
                        Copyright © 2007-2022 苏州随行信息技术服务有限公司  &nbsp;
                        ICP证：沪B2-20140130沪ICP备08010394号 &nbsp;&nbsp;
                        违法和不良信息举报：fuzhaohong@1hai.cn</a>
                </div>
            </div>
        </div>
    </div>

</div>
<script src="../js/special_models.js"></script>
<script>
    // 获取元素
    // ul元素
    var viewpage = document.getElementsByClassName('viewpage')[0];
    // 所有小圆点
    var circles = document.getElementsByClassName('circle');
    // 左右按钮
    var prev = document.getElementsByClassName('prev')[0];
    var next = document.getElementsByClassName('next')[0];
    // 放置图片和左右按钮的区域
    var calList = document.getElementsByClassName('cal-list')[0];
    // 排他函数
    function backcircle(ele) {
        for (var j = 0; j < ele.length; j++) {
            ele[j].className = "circle";
        };
    }

    // 1.鼠标放置到图片区域时,显示左右按钮,自动轮播停止
    // 2.鼠标离开图片区域时,左右按钮消失,自动轮播开始
    // 3.给右边按钮绑定事件,ul移动,小圆点跟随图片变化
    // 4.给左边按钮绑定事件,ul移动,小圆点跟随图片变化
    // 5.自动轮播调用右边按钮事件就可以了
    // 6.焦点轮播

    // 1.鼠标放置到图片区域时,显示左右按钮,自动轮播停止
    calList.onmouseover = function() {
        prev.style.display = "block";
        next.style.display = "block";
        // 轮播停止
        clearInterval(viewpage.autoId);
    };
    // 2.鼠标离开图片区域时,左右按钮消失,自动轮播开始
    calList.onmouseout = function() {
        prev.style.display = "none";
        next.style.display = "none";
        // 轮播开始
        autoplay();
    };
    // 3.给右边按钮绑定事件,ul移动,小圆点跟随图片变化
    // li的数量和小圆点的数量是不相同的,所以需要2个计数器,分别指代li和小圆点当前的状态

    // 设置小圆点的计数器
    var flag = 0;
    // li目标走的位置
    var count = 0;
    // 给右边按钮绑定事件
    next.onclick = function() {
        // 变成第二元素为当前的状态
        flag++;//1
        count++;//1
        // 判断flag的值
        // 回滚到flag初始0
        if (flag == circles.length) {
            flag = 0;
        };
        // 判断count的值回归
        if (count == viewpage.children.length) {
            // 拉回到left=0
            viewpage.style.left = 0;
            console.log('拉回');
            // 设置count为1,这样就可以看到第二张图片了
            count = 1;
        };

        // ①设置小圆点的样式
        // 先排他
        backcircle(circles);
        circles[flag].className = "circle active";
        // ②移动当前的ul使图片进行移动
        var target = count * (-1519);
        // 走动画
        moveAnimation2(viewpage, target);
    };
    // 4.给左边按钮绑定事件,ul移动,小圆点跟随图片变化
    prev.onclick = function() {
        // 是否是第一张图片
        if (count == 0) {
            count = viewpage.children.length - 1;//最后一个下标
            viewpage.style.left = count * (-1519) + 'px';
        };
        count--;
        flag--;
        if (flag < 0) {
            flag = circles.length - 1;
        };
        // ①设置小圆点的样式
        // 先排他
        backcircle(circles);
        circles[flag].className = "circle active";
        // ②移动当前的ul使图片进行移动
        var target = count * (-1519);
        // 走动画
        moveAnimation2(viewpage, target);
    };
    // 5. 自动轮播调用右边按钮事件就可以了
    function autoplay() {
        viewpage.autoId = setInterval(function() {
            // 调用右边按钮的点击事件
            // 变成第二元素为当前的状态
            flag++;//1
            count++;//1
            // 判断flag的值
            // 回滚到flag初始0
            if (flag == circles.length) {
                flag = 0;
            };
            // 判断count的值回归
            if (count == viewpage.children.length) {
                // 拉回到left=0
                viewpage.style.left = 0;
                console.log('拉回');
                // 设置count为1,这样就可以看到第二张图片了
                count = 1;
            };

            // ①设置小圆点的样式
            // 先排他
            backcircle(circles);
            circles[flag].className = "circle active";
            // ②移动当前的ul使图片进行移动
            var target = count * (-1519);
            // 走动画
            moveAnimation2(viewpage, target);
        }, 3000);
    };
    autoplay();
    // 6.焦点轮播
    // 循环给小圆点绑定事件
    for (var i = 0; i < circles.length; i++) {
        // 保存i值
        circles[i].index = i;
        // 绑定事件
        circles[i].onclick = function() {
            // 设置同步
            flag = this.index;
            count = this.index;
            console.log(flag);
            console.log(count);
            // 1.样式
            // 先排他
            backcircle(circles);
            this.className = "circle active";
            // 2.ul进行移动
            var target = this.index * (-1519);
            // 走动画
            moveAnimation2(viewpage, target);
        };
    };
</script>

<script>

    getHotCar();

    function getHotCar(){
        var url = "${pageContext.request.contextPath}/index";
        $.get(url,null,
            function(result){
                console.log(JSON.stringify(result));
                var carArray = result.data;
                for(var i = 0;i<carArray.length; i++){
                    var carType = carArray[i].carType;
                    var carName = carArray[i].carName;
                    var carId = carArray[i].carId;
                    var carDailyPrice = carArray[i].carDailyPrice;
                    var carShiftType = carArray[i].carShiftType;
                    var carSeatNumber = carArray[i].carSeatNumber;
                    var carImagePath = carArray[i].carImagePath;

                    var aEle = '<a class="hotcar-liinfo" href="${pageContext.request.contextPath}/car/' + carId + '/store">\n' +
                        '                    <span class="iconmore hoticon"></span>\n' +
                        '                    <div class="hotcar-info">\n' +
                        '                        <div class="hotcar-name">' + carName + '</div>\n' +
                        '                        <div class="hotcar-type"><span>' + carType + ' | ' + carShiftType + ' | ' + carSeatNumber + '</span></div>\n' +
                        '                        <div class="hotcar-price"><span><em>￥</em>' + carDailyPrice + '</span>/天起</div>\n' +
                        '                    </div>\n' +
                        '                    <div class="hotcar-car" style="right: 20px;">\n' +
                        '                        <img src="' + carImagePath + '" ></div>\n' +
                        '                </a>';
                    $(".hotcar-right").append(aEle);
                }

            },"json");
    }

</script>

<script>
    var custId = "${loginCustomer.custId}";
    if(custId != ""){
        var url = "${pageContext.request.contextPath}/pushMessage";
        $.get(url,{
            custId:custId
        }),function (result){
            console.log(result)
        }
            ,"json"
    }

</script>
</body>
</html>